<template>
	<view>
		<view class="con">
			<view class="box" v-if="info.address">
				<image src="/static/goods/addr.png" class="box__icon" mode=""></image>
				<view class="">
					<view class="box__addr">
						{{info.address.province+info.address.city+info.address.area}}{{info.address.detail}}
					</view>
					<view class="box__name">
						{{info.address.username}} {{info.address.mobile}}
					</view>
				</view>
			</view>
			<view class="b" v-if="info.goods">
				<view class=""
					style="padding: 30rpx;padding-bottom: 0;display: flex;align-items: center;justify-content: space-between;">
					<view class="" style="font-size: 28rpx;font-weight: 600;">
						订单号：{{info.order_sn}}
					</view>
					<view class="status" v-if="cur==0">
						等待支付
					</view>
					<view class="status" v-if="cur==1">
						等待发货
					</view>
					<view class="status" v-if="cur==2">
						已发货
					</view>
					<view class="status" v-if="info.refund_status==2">
						待退款
					</view>
					<view class="status" v-if="info.refund_status==3">
						已退款
					</view>
					<view class="status" v-if="info.refund_status==4">
						商家拒绝退款
					</view>
				</view>
				<view class="b__top">
					<image :src="$getImg(info.goods.image)" class="b__pic" mode="aspectFill"></image>
					<view class="" style="flex: 1;">
						<view class="u-flex u-flex-y-center u-flex-between">
							<view class="b__name">
								{{info.goods.name}}
							</view>

						</view>
						<view class="b__num">
							×{{info.num}}
						</view>
						<view class="u-flex u-flex-y-center u-flex-between">
							<view class="b__price">
								{{info.goods.price}}
							</view>
							<!-- 		<view class="b__btn" v-if="info.refund_status==1" @click="show=true">
								申请退款
							</view>
							<view class="b__btn" v-if="info.refund_status==2">
								申请退款中
							</view> -->
						</view>
					</view>
				</view>
				<view class="b__item">
					<view class="b__item__label">
						实付款
					</view>
					<view class="b__item__valp" style="color: #FD2A00;">
						{{info.total_price}}
					</view>
				</view>
				<!-- 				<view class="b__item">
					<view class="b__item__label">
						订单号
					</view>
					<view class="b__item__val">
						{{info.order_sn}}
					</view>
				</view> -->
				<view class="b__item">
					<view class="b__item__label">
						创建时间
					</view>
					<view class="b__item__val">
						{{formatTimestamp(info.createtime)}}
					</view>
				</view>
				<view class="b__item" v-if="info.paystatus==2">
					<view class="b__item__label">
						付款时间
					</view>
					<view class="b__item__val">
						{{info.paytime}}
					</view>
				</view>

				<view class="b__bz" v-if="info.remark">
					备注：{{
						info.remark
					}}
				</view>
			</view>
			<view class="b" v-else>
				<!-- <view class="b__top">
					<image :src="$getImg(info.goods.image)" class="b__pic" mode="aspectFill"></image>
				</view> -->
				<view class=""
					style="padding: 30rpx;padding-bottom: 0;display: flex;align-items: center;justify-content: space-between;">
					<view class="" style="font-size: 28rpx;font-weight: 600;">
						订单号：{{info.order_sn}}
					</view>
					<view class="status" v-if="cur==0">
						等待支付
					</view>
					<view class="status" v-if="cur==1">
						等待发货
					</view>
					<view class="status" v-if="cur==2">
						已发货
					</view>
					<view class="status" v-if="info.refund_status==2">
						待退款
					</view>
					<view class="status" v-if="info.refund_status==3">
						已退款
					</view>
					<view class="status" v-if="info.refund_status==4">
						商家拒绝退款
					</view>
				</view>
				<view class="">
					<view class="b__top" v-for="(item2,index2) in info.goodslist" :key="index2">
						<image :src="$getImg(item2.image)" class="b__pic" mode="aspectFill"></image>
						<view class="" style="flex: 1;">
							<view class="b__name">
								{{item2.name}}
							</view>
							<view class="b__num">
								×{{item2.num}}
							</view>
							<view class="u-flex u-flex-y-center u-flex-between">
								<view class="b__price">
									{{item2.price}}
								</view>

							</view>
						</view>
					</view>
				</view>
				<view class="b__item">
					<view class="b__item__label">
						退款
					</view>
					<view class="b__btn" v-if="info.refund_status==1" @click="show=true">
						申请退款
					</view>
					<view class="b__btn" v-if="info.refund_status==2">
						申请退款中
					</view>
				</view>
				<view class="b__item">
					<view class="b__item__label">
						实付款
					</view>
					<view class="b__item__valp" style="color: #FD2A00;">
						{{info.total_price}}
					</view>
				</view>
				<!-- 			<view class="b__item">
					<view class="b__item__label">
						订单号
					</view>
					<view class="b__item__val">
						{{info.order_sn}}
					</view>
				</view> -->
				<view class="b__item">
					<view class="b__item__label">
						创建时间
					</view>
					<view class="b__item__val">
						{{formatTimestamp(info.createtime)}}
					</view>
				</view>
				<view class="b__item" v-if="info.paystatus==2">
					<view class="b__item__label">
						付款时间
					</view>
					<view class="b__item__val">
						{{info.paytime}}
					</view>
				</view>

				<view class="b__bz" v-if="info.remark">
					备注：{{
						info.remark
					}}
				</view>
			</view>
		</view>
		<view class="" style="height: 140rpx;">

		</view>
		<view class="footer" :style="{paddingBottom:$u.addUnit($u.sys().safeAreaInsets.bottom,'px')}"
			v-if="info.status==2">
			<view class="u-flex u-flex-y-center" style="opacity: 0;">
				<view class="footer__cz">
					<image src="/static/goods/kf.png" class="footer__icon" mode=""></image>
					<view class="footer__text">
						客服
					</view>
				</view>
				<view class="" style="width: 1rpx;height: 30rpx;background-color: #f8f8f8;">

				</view>
				<view class="footer__cz">
					<image src="/static/goods/car.png" class="footer__icon" mode=""></image>
					<view class="footer__text">
						加购物车
					</view>
				</view>
			</view>

			<u-button :customStyle="{width:'203rpx',height:'85rpx',padding:0,fontSize:'30rpx',color:'#3E3E3E'}"
				shape='circle' color="#F0F4F7" text="查看物流"></u-button>
			<u-button :customStyle="{width:'203rpx',height:'85rpx',padding:0,fontSize:'30rpx'}" shape='circle'
				color="#FF4D30" text="确认收货" @click="finish"></u-button>


		</view>
		<view class="footer" :style="{paddingBottom:$u.addUnit($u.sys().safeAreaInsets.bottom,'px')}"
			v-if="info.status==3 && !info.is_comment">
			<view class="u-flex u-flex-y-center" style="opacity: 0;">
				<view class="footer__cz">
					<image src="/static/goods/kf.png" class="footer__icon" mode=""></image>
					<view class="footer__text">
						客服
					</view>
				</view>
				<view class="" style="width: 1rpx;height: 30rpx;background-color: #f8f8f8;">

				</view>
				<view class="footer__cz">
					<image src="/static/goods/car.png" class="footer__icon" mode=""></image>
					<view class="footer__text">
						加购物车
					</view>
				</view>
			</view>
			<u-button :customStyle="{width:'203rpx',height:'85rpx',padding:0,fontSize:'30rpx'}" shape='circle'
				color="#FF4D30" text="确认收货" style="opacity: 0;"></u-button>
			<u-button :customStyle="{width:'203rpx',height:'85rpx',padding:0,fontSize:'30rpx',color:'#3E3E3E'}"
				shape='circle' color="#F0F4F7" text="进行评价"
				@click="navto('/pages/goods/createeva?id='+info.id)"></u-button>


		</view>
		<!-- 退款 -->
		<u-popup mode="bottom" round="30rpx" :show="show" closeable @close="show=false" bgColor='#fafafa'>
			<view class="popbox">
				<view class="popbox__title">
					上传描述和凭证
				</view>
				<view class="popbox__box">
					<u--textarea v-model="value2" placeholder="补充描述，有助于商家更好的处理售后问题" border='none' count
						placeholderStyle='color:#9f9f9f;'></u--textarea>
					<!-- <view class="popbox__box__up">
						<image src="/static/goods/xj.png" style="width: 44rpx;height: 43rpx;" mode=""></image>
						添加照片
					</view> -->
					<view class="">
						<u-upload :fileList="fileList" name="1" :maxCount="5" @afterRead="afterRead" @delete="deletePic"
							:multiple="true" uploadText="描述图片"></u-upload>
					</view>
				</view>
				<view class="popbox__footer">
					<u-button text="确认" color="#E3432D"
						customStyle="width:638rpx;height:95rpx;border-radius:20rpx;font-size:30rpx;"
						@click="submit"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		orderInfo,
		submitRefund,
		finishOrder,

	} from "@/request/api/order.js"
	export default {
		data() {
			return {
				cur: 0,
				status: 0,
				shstatus: 0,
				show: false,
				value2: '',
				id: null,
				info: {},
				fileList: []
			};
		},
		onLoad(o) {
			// this.shstatus = o.shstatus
			this.id = o.id;
			this.status = o.status;
			this.cur = o.cur;


		},
		onShow() {
			this.getInfo();
		},
		methods: {
			finish() {
				finishOrder({
					id: this.id
				}).then(res => {
					this.getInfo();
				})
			},
			getInfo() {
				orderInfo({
					id: this.id
				}).then(res => {
					this.info = res.data;

				})
			},
			submit() {
				if (!this.value2) {
					uni.showToast({
						icon: "none",
						title: "补充描述，有助于商家更好的处理售后问题"
					})
					return
				}
				if (this.fileList.length == 0) {
					uni.showToast({
						icon: "none",
						title: "上传描述图片"
					})
					return
				}
				let li = this.fileList.map(item => {
					return item.url
				})
				console.log(li)
				let param = {
					order_id: this.info.id,
					desc: this.value2,
					images: li.join(",")
				}
				submitRefund(param).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: "none",
							title: "申请完成，等待审核"
						})
						this.getInfo();
						this.show = false;
					}
				})
			},
			deletePic(e) {
				this.fileList.splice(e.index, 1)
			},
			async afterRead(e) {
				console.log(e)
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				e.file.forEach(it1 => {
					uni.uploadFile({
						url: 'http://jie.fuliaoxx.com/api/common/upload', // 接口url
						filePath: it1.url,
						name: 'file',

						header: {
							isAdmin: true,
							token: uni.getStorageSync("shop_login_token")
						},
						success: async (res) => {
							let json = JSON.parse(res.data)
							console.log(JSON.parse(res.data))
							// that.model.image = json.data.url;
							that.fileList = [...that.fileList, {
								url: json.data
									.fullurl,
								key: json.data
									.url
							}]
							uni.hideLoading()
						},
					})
				})
			},
			formatTimestamp(timestamp) {
				// 创建 Date 对象
				const date = new Date(timestamp * 1000); // 将时间戳转换为毫秒
				// 获取年份、月份、日期、小时、分钟、秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				const second = String(date.getSeconds()).padStart(2, '0');
				// 返回格式化的日期时间字符串
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
		}
	}
</script>

<style lang="scss">
	.con {
		padding: 30rpx;

		.box {
			height: 139rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			margin-bottom: 26rpx;

			&__icon {
				width: 36rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}

			&__addr {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #232323;
				line-height: 46rpx;
			}

			&__name {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #747474;
				line-height: 46rpx;
			}
		}
	}

	.b {
		background-color: #fff;
		border-radius: 20rpx;
		padding-bottom: 23rpx;

		&__top {
			padding: 34rpx 24rpx 23rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #E9EAEC;
		}

		&__pic {
			width: 168rpx;
			height: 168rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-right: 20rpx;
		}

		&__name {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #1E1E1E;
			line-height: 30rpx;
		}

		.status {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FD2A00;
			line-height: 24rpx;
		}

		&__num {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #727272;
			line-height: 22rpx;
			margin: 19rpx 0 35rpx;
		}

		&__price {
			font-family: DINNextLTPro;
			font-weight: 500;
			font-size: 38rpx;
			color: #FD2A00;
			line-height: 27rpx;

			&::before {
				content: "￥";
				font-size: 24rpx;
			}
		}

		&__btn {
			width: 139rpx;
			height: 54rpx;
			background: #F8F8F8;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 26rpx;
			color: #1E1E1E;
			line-height: 36rpx;

		}

		&__item {
			height: 82rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;

			&__label {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 25rpx;
				color: #1E1E1E;
				line-height: 25rpx;
			}

			&__valp {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 35rpx;
				color: #1E1E1E;
				line-height: 35rpx;

				&::before {
					content: "￥";
					font-size: 28rpx;
				}
			}

			&__val {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #747474;
				line-height: 28rpx;
			}
		}

		&__bz {
			padding: 41rpx 30rpx 0;
			border-top: 1rpx solid #E9EAEC;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #6A6A6A;
			line-height: 24rpx;
		}
	}

	.footer {
		width: 750rpx;
		height: 138rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&__cz {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 134rpx;
		}

		&__icon {
			width: 42rpx;
			height: 40rpx;
		}

		&__text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #1D1D1D;
			line-height: 20rpx;
			margin-top: 9rpx;
		}
	}

	.popbox {
		height: calc(80vh - 200rpx);
		padding: 0 30rpx 200rpx;
		position: relative;

		&__title {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
		}

		&__box {
			border-radius: 30rpx;
			background-color: #f4f4f4;
			overflow: hidden;
			padding: 20rpx;

			&__up {
				width: 637rpx;
				height: 132rpx;
				background: #FAFAFA;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-left: 10rpx;
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #727272;
				line-height: 36rpx;
			}
		}

		&__footer {
			width: 750rpx;
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			bottom: 0;
			left: 0;
			background-color: #fff;
		}
	}
</style>